<template>
  <div>
    <h1>事件</h1>
    <button v-on:click="counter += 1">点我加数(v-on:click)</button>
    <br />
    <br />
    <button @click="counter -= 1">点我减数(@click)</button>
    <br />
    <br />
    <button @click="subtract">打印并减数(@click="subtract")</button>
    <!-- 问题1：如果调用以下代码, event获取为空，为什么？ -->
    <button @click="subtract()">打印并减数(@click="subtract()")</button>
    <p>当前数值为: {{counter}}</p>
    <div class="example-3">
      <button @click="warn('这是一串告警信息', $event)">($event示例)</button>
    </div>
  </div>
</template>

<script>
export default {
  // 问题3：为什么data有加(), methods不加()?
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    subtract(event) {
      this.counter--;
      // eslint-disable-next-line no-console
      console.log(
        `counter === ${this.counter}, event === ${event.target.tagName}`
      );
    },
    warn(msg = "", event) {
      if (event) {
        // 问题2：preventDefault做什么用？
        // 当input输入字符不合法时，可以通过preventDefault阻止键盘输入
        // https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
        // eslint-disable-next-line no-console
        console.log("执行了event.preventDefault()");
        event.preventDefault();
      }
      alert(msg);
    }
  }
};
</script>

<style>
</style>
